import React, { Component } from 'react'

export default class Login extends Component {
    // 受控组件  (受到state控制的组件)
    // 表单
    state = {
        user: "",
        passWord: "",
        flag1: true,
        flag2: true,
        text: "",
        val: ""
    }
    changeState = (ev, state, tag) => {
        // this.setState修改的值是变量的情况
        this.setState({
            [state]: ev.target[tag]
        })
    }
    render() {
        const { user, passWord, flag1, flag2, text, val } = this.state
        return (
            <div>
                {/* <p>
                    账号: <input value = { user } onChange={(ev) => {
                        // ev.target  当前dom节点
                        this.changeState(ev, 'user', 'value')
                        // this.setState({
                        //     user: ev.target.value
                        // })
                    }} type="text" />
                </p>
                <p>
                    密码: <input value = { passWord }  onChange={(ev) => {
                        this.changeState(ev, 'passWord', 'value')
                        // this.setState({
                        //     passWord: ev.target.value
                        // })
                    }} type="text" />
                </p> */}

                {/* <p>
                    游戏：<input checked = { flag1 } onChange={(ev) => {
                        this.changeState(ev, 'flag1', 'checked')
                    }} type="checkbox" />
                </p>
                <p>
                    运动：<input checked = { flag2 } onChange={(ev) => {
                        this.changeState(ev, 'flag2', 'checked')
                    }} type="checkbox" />
                </p> */}

                {/* <textarea value={ text } onChange={(ev) => {
                    this.changeState(ev, 'text', 'value')
                }} name="" id="" cols="30" rows="10"></textarea> */}

                {/* <input checked type="radio" /> */}

                {/* <select value={val} onChange={(ev) => {
                    console.log(ev.target.value)
                }} name="" id="">
                    <option value="11">第一个</option>
                    <option value="22">第二个</option>
                </select> */}

                <p>
                    <button onClick={() => {
                        console.log( text )
                    }}>登录</button>
                </p>
            </div>
        )
    }
}
